- page_title _('Emails')
- profile_message = _('Used for avatar detection. You can change it in your %{openingTag}profile settings%{closingTag}.') % { openingTag: "<a href='#{user_settings_profile_path}' class='!gl-text-link'>".html_safe, closingTag: '</a>'.html_safe}
- notification_message = _('Used for account notifications if a %{openingTag}group-specific email address%{closingTag} is not set.') % { openingTag: "<a href='#{profile_notifications_path}' class='!gl-text-link'>".html_safe, closingTag: '</a>'.html_safe}
- public_email_message = _('Your public email will be displayed on your public profile.')
- commit_email_message = _('Used for web based operations, such as edits and merges.')
- @force_desktop_expanded_sidebar = true

= render ::Layouts::SettingsSectionComponent.new(s_('Profiles|Email addresses')) do |c|
  - c.with_description do
    = s_('Profiles|Control emails linked to your account')
  - c.with_body do
    - if @show_unconfirmed_emails_alert
      = render Pajamas::AlertComponent.new(dismissible: false, variant: :warning, alert_options: { class: 'gl-mb-5' }) do |c|
        = c.with_body do
          = s_('Profiles|Unverified secondary email addresses are automatically deleted after three days')

    = render ::Layouts::CrudComponent.new(s_('Profiles|Linked emails'),
      icon: 'mail',
      count: @emails.size,
      toggle_text: s_('Profiles|Add new email'),
      toggle_options: { data: { testid: 'toggle-email-address-field' } }) do |c|
      - c.with_form do
        %h4.gl-mt-0
          = s_('Profiles|Add new email')
        = gitlab_ui_form_for 'email', url: profile_emails_path do |f|
          .form-group
            = f.label :email, s_('Profiles|Email address'), class: 'label-bold'
            = f.text_field :email, class: 'form-control gl-form-input gl-form-input-xl', data: { testid: 'email-address-field' }
          .gl-mt-3
            = f.submit s_('Profiles|Add email address'), data: { testid: 'add-email-address-button' }, pajamas_button: true
            = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
              = _('Cancel')
      - c.with_body do
        - if @emails.any?
          %ul.content-list
            %li{ class: '!gl-px-5' }
              = render partial: 'shared/email_with_badge', locals: { email: @primary_email, verified: current_user.confirmed? }
              %ul
                %li.gl-mt-2
                  = s_('Profiles|Primary email')
                  .gl-text-subtle.gl-text-sm= profile_message.html_safe
                - if @primary_email == current_user.commit_email_or_default
                  %li.gl-mt-2
                    = s_('Profiles|Commit email')
                    .gl-text-subtle.gl-text-sm= commit_email_message
                - if @primary_email == current_user.public_email
                  %li.gl-mt-2
                    = s_('Profiles|Public email')
                    .gl-text-subtle.gl-text-sm= public_email_message
                - if @primary_email == current_user.notification_email_or_default
                  %li.gl-mt-2
                    = s_('Profiles|Default notification email')
                    .gl-text-subtle.gl-text-sm= notification_message.html_safe
            - @emails.reject(&:user_primary_email?).each do |email|
              %li{ class: '!gl-px-5', data: { testid: 'email-row-content' } }
                .gl-flex.gl-justify-between.gl-flex-wrap.gl-gap-3
                  %div
                    = render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? }
                    %ul
                      - if email.email == current_user.commit_email_or_default
                        %li.gl-mt-2
                          = s_('Profiles|Commit email')
                          .gl-text-subtle.gl-text-sm= commit_email_message
                      - if email.email == current_user.public_email
                        %li.gl-mt-2
                          = s_('Profiles|Public email')
                          .gl-text-subtle.gl-text-sm= public_email_message
                      - if email.email == current_user.notification_email_or_default
                        %li.gl-mt-2
                          = s_('Profiles|Default notification email')
                          .gl-text-subtle.gl-text-sm= notification_message.html_safe
                  .gl-flex.gl-items-end.gl-grow.gl-flex-wrap-reverse.gl-gap-3.-gl-m-2{ class: "@sm/panel:gl-justify-end" }
                    - unless email.confirmed?
                      - confirm_title = "#{email.confirmation_sent_at ? s_('Profiles|Resend confirmation email') : s_('Profiles|Send confirmation email')}"
                      = render Pajamas::ButtonComponent.new(href: resend_confirmation_instructions_profile_email_path(email),
                        method: :put,
                        size: :small,
                        button_options: { class: 'gl-mt-2' }) do
                        = confirm_title

                    = render Pajamas::ButtonComponent.new(href: profile_email_path(email),
                      method: :delete,
                      category: :tertiary,
                      icon: 'remove',
                      button_options: { class: 'has-tooltip', title: _('Remove'), data: { confirm: _('Are you sure?'), confirm_btn_variant: 'danger', testid: 'delete-email-link' } })
